<template>
	<view class="wanl-money">
		<view class="bg">
			<view class="bg_top flex flex-column">
				<text class="title">共生豆（元）</text>
				<text class="text-sl">{{ user.money }}</text>
			</view>
			<view class="menu flex align-center">
				<view class="item flex-sub arrow flex justify-center align-center" @tap="$wanlshop.to('/pages/user/money/recharge')">
					<view class="content ctn_hover flex align-center justify-center">
						<image class="icon" src="@/static/images/user/gj/2.png" mode=""></image>
						<text>充值</text>
					</view>
				</view>
				<view class="item_line"></view>
				<view class="item flex-sub arrow flex justify-center align-center" @tap="$wanlshop.to('/pages/gsz/gsd')">
					<view class="content flex align-center justify-center">
						<image class="icon" src="@/static/images/user/gj/11.png" mode=""></image>
						<text>转账</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<money-list ref="moneyList"></money-list>
		</view>
		<!-- 功能 -->
<!-- 		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/recharge')">
				<view class="content">
					<text class="wlIcon-chongzhichenggong text-blue"></text>
					<text>充值</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/withdraw')">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>提现</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/gsz/gsd')">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>转账</text>
				</view>
			</view>
		</view> -->
<!-- 		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/bank/bank')">
				<view class="content">
					<text class="wlIcon-yinhangka text-blue"></text>
					<text>银行卡</text>
				</view>
				<view class="action">
					<text class="text-sm wanl-gray">用于提现到第三方账户</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/list')">
				<view class="content">
					<text class="wlIcon-yue1 text-orange"></text>
					<text>账单明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/witlist')">
				<view class="content">
					<text class="wlIcon-jinbitixian text-orange"></text>
					<text>提现日志</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import moneyList from '@/pages/user/money/list'
export default {
	data() {
		return {};
	},
	computed: {
		...mapState(['user'])
	},
	components: {
		moneyList
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/pay/getBalance',
				method: 'POST',
				success: (res) => {
					this.$store.commit('user/setUserInfo', { money: res.data });
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wanl-money {
	background-color: #F9F9F9;
	width: 96%;
	margin: 0 auto;
	.title {
		font-size: 26rpx;
		color: #FAC6FF;
		margin-bottom: 18rpx;
	}
}
.bg {
	box-shadow: 0px 4px 10px 0px rgba(239,96,252,0.06);
	border-radius: 40rpx;
	.bg_top {
		background: url('@/static/images/user/money/money_bg1.png') no-repeat top center;
		background-size: 100%;
		font-size: 72rpx;
		color: #FFFFFF;
		padding: 38rpx 0 26rpx 38rpx;
	}
	
	.menu {
		height: 92rpx;
		margin-bottom: 20rpx;
		.item_line {
			width: 2rpx;
			height: 32rpx;
			background-color: #EEEDEF;
			
		}
		.icon {
			height: 36rpx;
			width: 36rpx;
		}
	}
}

.list {
	height: 30vh;
}


.flex-column {
	flex-direction: column;
}
</style>
